<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="iconfont/iconfont.css">


 <!-- ------右边栏------ -->
 <div id="youbianLan">

    <div class="zhanghao">
        <i class="iconfont icon-31wode" style="font-size: 25px;"></i>
        <span>账号</span>
    </div>
    <div class="shopbag">
        <i class="iconfont icon-gouwudai" style="font-size: 25px;"></i>
        <i style="width: 20px;text-align: center;"></i>
        <!-- <i style="width: 20px;height: 20px;border-radius: 50%;background-color: #fff;display: block;color:#df147f;">0</i> -->
    </div>
    <div class="tubiao iconfont icon-youhuiquan"></div>
    <div class="tubiao iconfont icon-wodeshoucang"></div>
    <div class="tubiao iconfont icon-ego-favorite"></div>
    <div class="tubiao iconfont icon-wodezuji"></div>
    <div class="tubiao iconfont icon-shouji"></div>
    <div class="tubiao iconfont icon-bianji"></div>
    <div class="tubiao iconfont icon-xiangshangjiantou"></div>
</div>


    <!--header 头部  -->
    <div class="head container-fulid">
        <div class="header container">
            <div class="left">
                <span>西安市 </span>
                <div class="triangle"></div>
                <!-- <div class="diqu_box">
                    <p>请选择你所在的收货地址 </p><i class="iconfont icon-cuowu" style="font-size: 12px; display: inline-block;"></i>
                    <div class="diqu_sBox">
                        <div class="head">
                            <ul style="width: 470px;height: 30px;display: flex;">
                                <li>省份</li>
                                <li>城市</li>
                            </ul>
                        </div>
                        <div class="body" style="cursor: pointer;">
    
                        </div>
                    </div>
                </div> -->
            </div>
            <div>
                <ul class="right">
                    <li class="first-li"><a href="./register.html ">请注册</a>
                        <div class="sec">
                            <p>你好![请登录]</p>
                            <hr>
                            <ul class="sec-li">
                                <li>我的收藏</li>
                                <li>我的订单</li>
                                <li>零钱</li>
                                <li>我的优惠卷</li>
                                <li>我的唯品币</li>  
                                <li>唯品金融</li>
                            </ul>
                            <div style="clear: both;"></div>
                        </div>
                    </li>
                    <li><i>/</i><a href="./login.html">请登录</a></li>
                    <li class="third-li3"><i>/</i><a href="#">签到有礼</a>
                        <div class="sec-li3">
                            <h5>请前往 <span>唯品会首页APP</span> 签到哦</h5>
                            <u>即日起签到网页端将下线，请前往"唯品会-首页app签到领卷"继续参与签到活动</u><br>
                            <img src="./images/header-qindao1.png" alt="">

                        </div>
                    </li>
                    <li>
                        <i>/</i>
                        <a href="#">我的订单</a>
                    </li>
                    <li>
                        <i>/</i>
                        <a href="#">我的特卖</a>
                        <div class="triangle"></div>
                    </li>
                    <li>
                        <i>/</i>
                        <a href="#">俱乐部</a>
                        <div class="triangle"></div>
                    </li>
                    <li>
                        <i>/</i><a href="#">客户服务</a>
                        <div class="triangle"></div>
                    </li>
                    <li class="eight-li8">
                        <i>/</i>
                        <a href="#">手机版</a>
                        <div class="two-code">
                            <img src="images/footer-ma.jpg" alt="">
                        <br><b>随时逛 及时抢</b>
                        </div>
                    </li>
                    <li>
                        <i>/</i>
                        <a href="#">更多</a>
                        <div class="triangle"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- logo  图标-->
    <div class="container-fulid">
        <div class="logo  container">
            <div class="left">
                <div class="lg1"> <img src="images/lg1.png" alt=""> </div>
                <div class="lg2"> <img src="images/lg2.jpg" alt=""> </div>
            </div>
            <div class="right">

                <input type="text" placeholder="女士大衣" class="txt" size="35px">

                <input type="submit" value="搜索" size="25px" class="sub" size="25px">

                <div class="tool">
                    <span class="iconfont icon-gouwudai"></span> 购物袋<span class="count">0</span>
                    <div class="bag">您的购物袋还没有商品，再去逛逛吧~</div>
                </div>
                <div class="right-ul">
                    <ul>
                        <li>双十一</li>
                        <li>女士大衣</li>
                        <li>女靴</li>
                        <li>11.11爆款抢购</li>
                    </ul>
                </div>
                <!-- 搜索下拉框 -->
                <!-- <div class=" sub-down">
                        
                    </div> -->

            </div>

        </div>
    </div>

    <!-- fixed 固定商品分类 下拉菜单-->
    <!-- <section>

         </section> -->
    <!-- ======================================================= -->
    <div class="container-fulid">
        <div class="fixed container">

            <ul class="fixed-m">
                <li class="fixed-m-first">商品分类</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li>推荐</li>
                <li class="fixed-m-more">更多<span>></span>

                </li>
            </ul>
     <!-- ======================================= -->
            <!-- 二级下拉菜单 -->
            <ul class='nav '>
                <li>
                    <a href="#">女装/男装/内衣</a>
                </li>
                <li>
                    <a href="#">女鞋/男鞋/箱包</a>
                </li>
                <li>
                    <a href="#">护肤彩妆/个护</a>
                </li>
                <li>
                    <a href="#">运动户外</a>
                </li>
                <li>
                    <a href="#">家电数码</a>
                </li>
                <li>
                    <a href="#">母婴童装</a>
                </li>
                <li>
                    <a href="#">手表配饰</a>
                </li>
                <li>
                    <a href="#">居家用品</a>
                </li>
                <li>
                    <a href="#">唯品生活</a>
                </li>
                <li>
                    <a href="#">医药用品</a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
            </ul>
            <!-------------------------------------------------------  -->
                    <!-- <div class="third-box">
                        唯品会 页面渲染
                        
                    </div> -->
            <!-- ====================================================== -->

        </div>
    </div>
<script src="js/jQuery.js"></script>
<script>
    // 下拉菜单---------------------------------
    $(".fixed-m-first").eq(0).mouseover(function () {

        $(".nav").stop().show();
    });
    $(".fixed-m-first").eq(0).mouseout(function () {

        $(".nav").stop().hide();
    });
    $(".nav").mouseover(function () {

        $(".nav").stop().show();
    });
    $(".nav").mouseout(function () {

        $(".nav").stop().hide();
    });
    $(".nav li").mouseover(function () {
        $(".third-box").stop().show()
    })
    $(".nav li").mouseout(function () {
        $(".third-box").stop().hide()
    });
    $(".third-box").mouseover(function () {
        $(this).stop().show()
        $(".nav").stop().show()
        
    })
    $(".third-box").mouseout(function () {
        $(this).stop().hide()
        $(".nav").stop().hide()
    })

    // 吸顶 顶部固定---------------------------------------------------
    //scrollTop
    //    $(window).scroll(function() {
    //     console.log($(window).scrollTop());
    // });

    $(window).scroll(function () {
        if($(window).scrollTop()>=200){
            $(".fixed-m").css({
                position:"fixed",
                top:0,
                left:500,
                backgroundColor:"white",
                // height:70
            });
        }else{
            $(".fixed-m").css({
                position:"static",
                top:0,
                lef:0
            })
        };
    });

// -------------------------------------------------------


</script>